<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<!--1、Head：标题、css-->
<head th:replace="admin_fragments :: head(添加用户)"></head>

<!--2、JS-->
<div th:replace="admin_fragments :: script"></div>

<!--3、内容-->
<body style="background-color: #FFFFFF">

<div style=" width:500px; margin:50px auto">
    <form class="layui-form" th:action="@{/user/page/insertUser}" method="post">

        <div class="layui-form-item">
            <label class="layui-form-label">用户</label>
            <div class="layui-input-block">
                <input name="userName" class="layui-input" type="text" placeholder="请输入用户名" autocomplete="off"
                       lay-verify="username">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input name="userPassword" class="layui-input" type="password" placeholder="请输入密码" autocomplete="off"
                       lay-verify="password">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input name="userEmail" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱"
                       lay-verify="email">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input name="userAge" class="layui-input" type="text" autocomplete="off" placeholder="请输入年龄"
                       lay-verify="age">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="formDemo" lay-submit>提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form;
        // 自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length < 3) {
                    return '请输入至少3位的用户名';
                }
            },
            userPassword: function (value) {
                if (value.length < 6) {
                    return '密码至少6位';
                }
            }
            , userEmail: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
        });
        //监听提交
        form.on('submit(formDemo)', function (data) {
            //ajax
            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value};获取单个值data.field["title"]
        });
    });
</script>
</body>


<!--4、添加用户，状态判断-->
<script th:inline="javascript">
    layui.use('layer', function () {
        var layer = layui.layer;
        var userAddMessage = [[${userAddMessage}]];

        if (userAddMessage == 'true') {
            layer.alert('添加用户成功！', {
                icon: 6,
                title: "提示"
            });
        } else if (userAddMessage == 'false') {
            layer.alert('添加用户失败！', {
                icon: 5,
                title: "提示"
            });
        }
    });
</script>

</html>